<template>
	<div class="container">
		<picker
			mode="date"
			:value="date"
			fields="month"
			:end="endDate"
			@change="bindDateChange"
			v-if="recordList.length == 0">
			<view class="inner">
				{{ dates }}
				<uni-icons
					type="down"
					size="15"
					style="margin-left: 7rpx"></uni-icons>
			</view>
		</picker>
		<view v-if="recordList.length > 0">
			<view
				class="indexlist"
				v-for="items in recordList"
				:key="items.dates">
				<picker
					class="sticky"
					mode="date"
					:value="items.date"
					fields="month"
					:end="endDate"
					@change="bindDateChange">
					<view class="inner">
						{{ items.dates }}
						<uni-icons
							type="down"
							size="15"
							style="margin-left: 7rpx"></uni-icons>
					</view>
				</picker>
				<view class="content">
					<view
						class="row"
						v-for="item in items.data"
						:key="item.id"
						@click.stop="goDetail(item.id)">
						<view class="pic">
							<image
								src="/static/shop1.png"
								mode="aspectFill"></image>
						</view>
						<view class="info">
							<view class="title">
								<view class="left">
									{{ item.storeName }}
								</view>
								<view class="right">
									{{ -item.receiptsMoney | formatAmount }}
								</view>
							</view>
							<view class="bottom">
								{{ item.payTime | parseTime }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view
			style="text-align: center"
			v-if="recordList.length == 0">
			<view style="text-align: center">没有更多数据了</view>
		</view>
		<view
			class="loading"
			v-if="recordList.length">
			<view v-if="loading == 0"></view>
			<view v-if="loading == 1">数据加载中~</view>
			<view v-if="loading == 2">没有更多数据了~</view>
		</view>
	</div>
</template>

<script>
import { getHistory } from '@/apis/first.js';
import dayjs from 'dayjs';
import { createLogger } from 'vuex';
export default {
	name: 'Consume',
	data() {
		return {
			date: dayjs(Date.now()).format('YYYY-MM'),
			pageNum: 1,
			pageSize: 15,
			userId: '',
			loading: 0, // 0默认 1加载中 2没有更多
			recordList: [],
			orignList: []
		};
	},
	filters: {
		parseTime(value) {
			if (value) {
				return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
			} else {
				return '';
			}
		},
		formatAmount(value) {
			value = Number(value);
			// 如果不是数字或者是 NaN，则返回原始值
			if (isNaN(value)) {
				return value;
			}
			// 将金额保留两位小数
			const formattedValue = value.toFixed(2);
			// 分隔符
			const separator = ',';
			// 将金额转换为字符串
			let [integerPart, decimalPart] = formattedValue.split('.');
			integerPart = integerPart.replace(
				/\B(?=(\d{3})+(?!\d))/g,
				separator
			);
			// 返回格式化后的字符串
			return `${integerPart}.${decimalPart}`;
		}
	},
	computed: {
		dates() {
			let arr = this.date.split('-');
			return arr[0] + '年' + arr[1] + '月';
		},
		// startDate() {
		// 	let arr = this.date.split("-");
		// 	let year = arr[1] == "01" ? arr[0] - 1 : arr[0];
		// 	let month = arr[1] == "01" ? "12" : (Number(arr[1]) - 1);
		// 	return year + '-' + String(month).padStart(2, '0');
		// },
		endDate() {
			return dayjs(Date.now()).format('YYYY-MM');
		}
	},
	onLoad() {
		this.userId = this.$store.state.user.userInfo.id;
		this.getRecordList();
	},
	// 触底
	onReachBottom() {
		if (this.loading == 2) {
			return;
		}
		this.pageNum += 1;
		this.loading = 1;
		this.getRecordList();
	},
	methods: {
		bindDateChange(e) {
			// console.log(e)
			this.date = e.detail.value;
			/**
			 * @TODO
			 * 去调接口查询某一月的信息
			 */
			this.loading = 0;
			this.pageNum = 1;
			this.recordList = [];
			this.orignList = [];
			this.getRecordList();
		},
		async getRecordList() {
			let { userId, pageSize, pageNum, date } = this;
			const day = dayjs(date).daysInMonth();
			let res = await getHistory({
				id: userId,
				pageSize,
				pageNum,
				payTime: date + '-' + day
			});
			if (res.code === 200) {
				if (res.data.list.length == 0) {
					this.loading = 2;
				} else {
					this.loading = 0;
				}
				this.orignList = [...this.orignList, ...res.data.list];
				// console.log(this.orignList, ' this.orignList');
				let currentMonth = null;
				let resultArr = [];
				let count = -1;
				this.orignList.forEach(item => {
					const month = dayjs(item.payTime).format('YYYY年MM月');
					const month1 = dayjs(item.payTime).format('YYYY-MM');
					if (month != currentMonth) {
						// 初始化一个数据
						let obj = {
							dates: month,
							date: month1,
							data: [item]
						};
						count++;
						currentMonth = month;
						resultArr.push(obj);
					} else {
						resultArr[count].data.push(item);
					}
				});
				this.recordList = resultArr;
			}
		},
		goDetail(id) {
			uni.navigateTo({
				url: '/pages/consume/detail/index?paymentId=' + id
			});
		}
	}
};
</script>
<style scoped lang="scss">
.container {
	position: relative;
	.inner {
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 40rpx;
		background-color: rgb(246, 246, 246);
	}
	.content {
		background-color: #fff;

		.row {
			display: flex;
			padding: 0 20rpx;
			align-items: center;

			.pic {
				width: 90rpx;
				height: 90rpx;
				margin: 20rpx 20rpx 20rpx 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 90rpx;
				padding: 20rpx 0;
				box-sizing: content-box;
				border-bottom: 1px solid #eee;

				.title {
					display: flex;
					justify-content: space-between;

					.left {
						font-size: 28rpx;
						color: #1a1a1a;
						font-weight: 500;
					}

					.right {
						text-align: right;
						font-size: 32rpx;
						color: #1a1a1a;
						font-weight: bold;
					}
				}

				.bottom {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	.loading {
		text-align: center;
		color: #888;
		font-size: 26rpx;
		line-height: 2em;
		padding-top: 10rpx;
		padding-bottom: 50rpx;
	}
}
.sticky {
	position: sticky;
	position: -webkit-sticky;
	top: -1rpx;
}
</style>
